<template>
  <el-container class="main-contain">
    <!--左侧侧边栏-->
    <el-aside :width="isCollapse ? '64px': '200px'">
      <el-menu
        unique-opened
        :collapse-transition="false"
        :collapse="isCollapse"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b" router>
        <!--一级菜单-->
        <el-submenu :index="item.id+''" v-for="item in MenuList" :key="item.id">
          <template slot="title">
            <i :class="IconList[item.id]"></i>
            <span>{{item.authName}}</span>
          </template>
          <!--二级菜单-->
          <el-menu-item :index="'/'+subItem.path+''" v-for="subItem in item.children" :key="subItem.id">
            <i class='el-icon-menu'></i>
            <span>{{subItem.authName}}</span>
          </el-menu-item>
        </el-submenu>

      </el-menu>
    </el-aside>
    <el-container>
      <!--头部区域-->
      <el-header>
        <div class="l-content">
          <el-button plain icon="el-icon-menu" size="mini" @click="trigger"></el-button>
          <span class="page">首页</span>
        </div>
        <div class="r-content">
          <el-dropdown trigger="click" size="mini">
            <img src="../../assets/user.png" alt="">
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="goMain">个人中心</el-dropdown-item>
              <el-dropdown-item @click.native="back">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <!--主体区域-->
      <el-main>
       <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import axios from 'axios'

  export default {
    name: "Main",
    data() {
      return {
        //菜单列表
        MenuList: [],
        // //图标列表
         IconList: {
          '1': 'el-icon-user-solid',
          '2': 'el-icon-setting',
          '3': 'el-icon-s-goods',
          '4': 'el-icon-picture'
        },
        //折叠
        isCollapse: false,
        //右侧列表
        tableData: []
      }
    },
    created() {
      this.getMenuList()

    },
    methods: {
      //左侧菜单栏
      async getMenuList() {
        let res = await axios.get("http://localhost:3000/data")
        console.log(res)
        if (res.data.mata.status !== 200) return this.$message.error("获取菜单失败")
        this.MenuList = res.data.data
      },
      //导航栏切换
      trigger() {
        this.isCollapse = !this.isCollapse
      },
      //退出
      back() {
        localStorage.removeItem("token")
        this.$router.push('/login')
      },
      goMain(){
        this.$router.push('/welcome')
      }
    }
  }
</script>

<style scoped>
  .el-header {
    display: flex;
    color: white;
    justify-content: space-between;
    background-color: #6E6E6E;
    align-items: center;
  }

  img {
    height: 50px;
    width: 50px;
    cursor: pointer;
    border-radius: 50%;
  }

  .el-aside {
    background-color: #545c64;
  }

  .el-main {
    background-color: #eaedf1;
  }

  .main-contain {
    height: 100%;
  }

  .page {
    margin-left: 10px;
  }

  .el-menu {
    border: none;
  }

  .el-row {
    margin-bottom: 20px;
  }


  .el-col {
    border-radius: 4px;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

</style>
